<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康数据可视化</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入数据文件 -->
    <script src="data.js"></script>
    <style>
        /* 容器样式 */
        .chart-container {
            display: flex;
            flex-wrap: wrap; /* 自动换行 */
            justify-content: space-between; /* 平分每行的空间 */
        }
        .chart-item {
            width: 32%; /* 每个图表占一行的三分之一 */
            height: 400px; /* 固定高度 */
            margin-bottom: 20px; /* 图表之间的垂直间距 */
            transform-origin: top left; /* 缩放的起点为左上角 */
            transition: transform 0.3s; /* 缓慢缩放效果 */
        }
    </style>
</head>
<body>
<div class="chart-container">
    <!-- 各个维度图表的容器 -->
    <div id="weightChart" class="chart-item"></div>
    <div id="scoreChart" class="chart-item"></div>
    <div id="BMIChart" class="chart-item"></div>
    <div id="fatRateChart" class="chart-item"></div>
    <div id="skeletalMuscleChart" class="chart-item"></div>
    <div id="visceralFatChart" class="chart-item"></div>
    <div id="metabolicRateChart" class="chart-item"></div>
    <div id="moistureRateChart" class="chart-item"></div>
    <div id="boneSaltChart" class="chart-item"></div>
    <div id="proteinChart" class="chart-item"></div>
    <div id="muscleMassChart" class="chart-item"></div>
    <div id="bodyAgeChart" class="chart-item"></div>
</div>

<script>
    // 日期数据
    const dateList = data.map(item => item.date);

    // 初始化图表函数
    function initChart(chartId, title, seriesName, seriesData) {
        const chart = echarts.init(document.getElementById(chartId));
        chart.setOption({
            title: { text: title },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                data: dateList,
                axisLabel: { rotate: 45 }  // 旋转标签使得更容易阅读
            },
            yAxis: {
                type: 'value',
                name: seriesName,
                nameLocation: 'middle',
                nameGap: 30
            },
            series: [{
                name: seriesName,
                type: 'line',
                data: seriesData,
                smooth: true,  // 平滑线条
                symbol: 'circle',  // 节点显示为圆形
                symbolSize: 6,
                lineStyle: { width: 2 }
            }]
        });
    }

    // 初始化各个图表
    initChart('weightChart', '体重变化', '体重', data.map(item => item.weight));
    initChart('scoreChart', '身体得分', '得分', data.map(item => item.score));
    initChart('BMIChart', 'BMI 变化', 'BMI', data.map(item => item.BMI));
    initChart('fatRateChart', '脂肪率变化', '脂肪率', data.map(item => item.fatRate));
    initChart('skeletalMuscleChart', '骨骼肌量变化', '骨骼肌量', data.map(item => item.muscleMass));
    initChart('visceralFatChart', '内脏脂肪等级变化', '内脏脂肪等级', data.map(item => item.visceralFatLevel));
    initChart('metabolicRateChart', '基础代谢率变化', '基础代谢率', data.map(item => item.BMR));
    initChart('moistureRateChart', '水分率变化', '水分率', data.map(item => item.waterRate));
    initChart('boneSaltChart', '骨盐量变化', '骨盐量', data.map(item => item.boneMass));
    initChart('proteinChart', '蛋白质变化', '蛋白质', data.map(item => item.protein));
    initChart('muscleMassChart', '肌肉量变化', '肌肉量', data.map(item => item.muscleAmount));
    initChart('bodyAgeChart', '身体年龄变化', '身体年龄', data.map(item => item.bodyAge));

    // 缩放图表函数
    function scaleCharts() {
        const scaleFactor = window.innerWidth / 1920; // 基于窗口大小计算缩放比例
        document.querySelectorAll('.chart-item').forEach(chart => {
            chart.style.transform = `scale(${scaleFactor})`; // 设置缩放比例
        });
    }

    // 监听窗口大小变化
    window.onresize = scaleCharts;
    window.onload = scaleCharts; // 页面加载时初始化缩放
</script>
</body>
</html>
